<template>
    <el-dialog
        :visible.sync="dialogState"
        width="640px"
        :close-on-click-modal="false"
        :before-close="dialogClose"
    >
        <div class="dialog-title" slot="title">编辑图片</div>
        <div class="dialog-body">
            <el-form ref="form" :model="form" label-width="40px">
                <el-row>
                    <el-col :span="24">
                        <el-alert
                            title="证件要求：请上传清晰彩色原件，扫描件或数码照，否则影响结算；图片仅支持jpg、jpeg、png的图片格式，且单张图片大小不能超过2M。"
                            type="warning"
                            effect="dark"
                            :closable="false"
                            style="margin-bottom:20px;"
                            show-icon
                        ></el-alert>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" style="text-align:center;">
                        <el-form-item label="" prop="idCardFront" :rules="[{required:true,message:'请上传身份证正面照片',trigger:'blur'}]">
                            <el-upload
                                class="upload-demo"
                                drag
                                action="/server/api/system/uploadFile"
                                :data="{}"
                                :style="{height:'120px',width:'180px',margin:'0 auto'}"
                                :show-file-list="false"
                                :on-success="handleIdCardFront"
                            >
                                <img v-if="form.idCardFront != ''" :src="form.idCardFront" width="180" height="120" class="avatar">
                                <i v-else class="el-icon-upload"></i>
                            </el-upload>
                            <p style="line-height:20px;text-align:center;">身份证正面照片</p>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="" prop="idCardBack" :rules="[{required:true,message:'请上传身份证反面照片',trigger:'blur'}]">
                            <el-upload
                                class="upload-demo"
                                drag
                                action="/server/api/system/uploadFile"
                                :data="{}"
                                :style="{height:'120px',width:'180px',margin:'0 auto'}"
                                :show-file-list="false"
                                :on-success="handleIdCardBack"
                            >
                                <img v-if="form.idCardBack != ''" :src="form.idCardBack" width="180" height="120" class="avatar">
                                <i v-else class="el-icon-upload"></i>
                            </el-upload>
                            <p style="line-height:20px;text-align:center;">身份证反面照片</p>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="" prop="licensePic" :rules="[{required:true,message:'请上传营业执照',trigger:'blur'}]">
                            <el-upload
                                class="upload-demo"
                                drag
                                action="/server/api/system/uploadFile"
                                :data="{}"
                                :style="{height:'120px',width:'180px',margin:'0 auto'}"
                                :show-file-list="false"
                                :on-success="handleLicensePic"
                            >
                                <img v-if="form.licensePic != ''" :src="form.licensePic" width="180" height="120" class="avatar">
                                <i v-else class="el-icon-upload"></i>
                            </el-upload>
                            <p style="line-height:20px;text-align:center;">营业执照照片，复印件需要加盖公章</p>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="mchType == 12" prop="openingLicense" :rules="[{required:true,message:'请上传银行开户许可证',trigger:'blur'}]">
                            <el-upload
                                class="upload-demo"
                                drag
                                action="/server/api/system/uploadFile"
                                :data="{}"
                                :style="{height:'120px',width:'180px',margin:'0 auto'}"
                                :show-file-list="false"
                                :on-success="handleOpeningLicense"
                            >
                                <img v-if="form.openingLicense != ''" :src="form.openingLicense" width="180" height="120" class="avatar">
                                <i v-else class="el-icon-upload"></i>
                            </el-upload>
                            <p style="line-height:20px;text-align:center;">银行开户许可证</p>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="text-align:center;">
                        <el-button type="primary" size="small" @click="onSubmit('form')" style="width:100px;">提交</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data(){
        return {
            dialogState:false,
            mchType:0,          // 商户类型:10=个人,11=个体工商户,12=企业
            form:{
                idCardFront:"",     // 法人身份证正面
                idCardBack:"",      // 法人身份证反面
                // imgVerifyMark:"",   // 图片审核进度
                // imgVerifyStatus:0,  // 图片审核状态:0=待审核,1=审核中,2=已通过,3=未通过
                licensePic:"",      // 营业执照照片
                mchNo:"",           // 商户编号
                openingLicense:"",  // 开户许可证
            },
        }
    },
    methods:{
        // 提交数据
        onSubmit(form){
            this.$refs[form].validate((valid) => {
                if(valid){
                    this.$http.post('/api/altmch/modifyMchPics', this.form).then(result => {
                        if(result.code == 200){
                            this.$message.success(result.msg);
                            this.$emit('refersh');
                            this.dialogClose();
                        }else{
                            this.$message.error(result.msg);
                        }
                    });
                }
            });
        },
        // 身份证正面
        handleIdCardFront(response, file, fileList){
            if(response.code == 200){
                this.form.idCardFront = response.data;
            }else{
                this.$message.error(response.error);
            }
        },
        // 身份证反面
        handleIdCardBack(response, file, fileList){
            if(response.code == 200){
                this.form.idCardBack = response.data;
            }else{
                this.$message.error(response.error);
            }
        },
        // 营业执照照片
        handleLicensePic(response, file, fileList){
            if(response.code == 200){
                this.form.licensePic = response.data;
            }else{
                this.$message.error(response.error);
            }
        },
        // 开户许可证
        handleOpeningLicense(response, file, fileList){
            if(response.code == 200){
                this.form.openingLicense = response.data;
            }else{
                this.$message.error(response.error);
            }
        },
        // 打开弹窗
        openDialog(e){
            this.$http.get('/api/altmch/mchPics', {params:{mchNo:e.mchNo}}).then(result => {
                if(result.code == 200){
                    for (let i in this.form){
                        this.form[i] = result.data[i];
                    }
                    this.mchType = result.data.mchType;
                    // this.form = result.data;
                    this.dialogState = true;
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 关闭回调
        dialogClose(e){
            this.dialogState = false;
            this.$refs['form'].resetFields();
        },
    },
}
</script>

<style lang="less" scoped>
::v-deep(.el-upload){
    .el-upload-dragger{
        height:120px;
        width:180px;
    }
}
</style>
